<template>
  <el-select 
    v-model="selectedProductIds" 
    :placeholder="placeholder" 
    :style="{ width: width }"
    filterable
    remote
    :clearable="clearable"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    :remote-method="handleProductSearch"
    :loading="productSearchLoading"
    @change="handleProductChange">
    <el-option 
      v-for="item in productOptions" 
      :key="item.value" 
      :label="item.label" 
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getProductList } from '@/api/modules/commodity'
import { debounce } from 'lodash'

// 定义组件属性
const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: () => []
  },
  // 是否可清空
  clearable: {
    type: Boolean,
    default: true
  },
  placeholder: {
    type: String,
    default: '请选择商品'
  },
  width: {
    type: String,
    default: '100%'
  },
  multiple: {
    type: Boolean,
    default: true
  },
  collapseTags: {
    type: Boolean,
    default: true
  },
  collapseTagsTooltip: {
    type: Boolean,
    default: true
  },
  // 只查询启用状态的商品
  enableFlag: {
    type: Number,
    default: 1
  },
  // 货主ID，用于筛选商品
  ownerIds: {
    type: [Array, String],
    default: () => []
  },
  // 过滤产品的ID字段名称（默认为ownerIds）
  filterIdsKey: {
    type: String,
    default: 'ownerIds'
  },
  // 新增：自定义使用哪个字段作为value值
  valueKey: {
    type: String,
    default: 'recId'
  },
  // 新增：自定义label字段
  labelKey: {
    type: String,
    default: 'productName'
  },
  // 新增：自定义请求方法
  requestFunction: {
    type: Function,
    default: null
  },
  // 新增：自定义请求参数
  customParams: {
    type: Object,
    default: () => ({})
  },
  // 新增：是否合并自定义参数与默认参数
  mergeParams: {
    type: Boolean,
    default: false
  }
})

// 定义组件事件
const emit = defineEmits(['update:modelValue', 'change'])

// 内部状态
const productOptions = ref([])
const productSearchLoading = ref(false)
const selectedProductIds = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : 
  props.modelValue ? props.multiple ? [props.modelValue] : props.modelValue : props.multiple ? [] : '')

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  // 处理差异化的单选和多选模式
  if (props.multiple) {
    // 多选模式：确保值是数组
    const newValArray = Array.isArray(newVal) ? newVal : newVal ? [newVal] : []
    if (JSON.stringify(newValArray) !== JSON.stringify(selectedProductIds.value)) {
      selectedProductIds.value = newValArray
    }
  } else {
    // 单选模式：直接赋值，不需要数组包装
    if (newVal !== selectedProductIds.value) {
      selectedProductIds.value = newVal
    }
  }
})

// 监听内部值变化，同步到外部
watch(() => selectedProductIds.value, (newVal) => {
  // 多选模式直接发送数组，单选模式发送值本身
  const valueToEmit = props.multiple ? newVal : newVal
  emit('update:modelValue', valueToEmit)
}, { deep: true })

// 监听ownerIds变化，重新加载商品列表
watch(() => props.ownerIds, (newVal, oldVal) => {
  if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
    // 清空已选商品
    if (props.multiple) {
      selectedProductIds.value = []
    } else {
      selectedProductIds.value = ''
    }
    emit('update:modelValue', props.multiple ? [] : '')
    
    // 如果有ownerIds，重新加载商品列表
    if (newVal && (Array.isArray(newVal) ? newVal.length > 0 : newVal)) {
      fetchProductList()
    } else {
      productOptions.value = []
    }
  }
})

// 监听自定义参数变化
watch(() => props.customParams, (newVal, oldVal) => {
  if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
    // 当自定义参数发生变化时，重新加载商品列表
    fetchProductList()
  }
}, { deep: true })

// 获取商品列表
const fetchProductList = async (keyword = '') => {
  try {
    // 检查是否需要加载所有商品或者已选择货主
    const ownerIdsValue = props.ownerIds
    const loadAll = ownerIdsValue === 'all' || (Array.isArray(ownerIdsValue) && ownerIdsValue.includes('all'))
    if(!props.mergeParams){
      if (!loadAll && (!ownerIdsValue || (Array.isArray(ownerIdsValue) && ownerIdsValue.length === 0))) {
        // 如果没有选择货主且不是加载全部，且自定义参数中也没有ownerIds，则清空选项并返回
        productOptions.value = []
        return
      }
    }
    
    
    productSearchLoading.value = true
    
    // 构建默认查询参数
    let params = {
      productName: keyword,
      enableFlag: props.enableFlag // 只查询启用状态的商品
    }
    
    // 只在非全量加载模式下传递过滤ID
    if (!loadAll && ownerIdsValue) {
      // 使用自定义的键名
      params[props.filterIdsKey] = Array.isArray(ownerIdsValue) ? ownerIdsValue.join(',') : ownerIdsValue
    }
    
    // 处理自定义参数
    if (props.mergeParams) {
      // 合并自定义参数与默认参数
      params = { ...params, ...props.customParams }
    } else {
      // 仅使用自定义参数
      params = { ...params, ...props.customParams }
      
      // 确保关键词搜索功能正常
      if (keyword && !params.productName) {
        params.productName = keyword
      }
    }
    // 使用自定义请求函数或默认请求函数
    const requestFn = props.requestFunction || getProductList
    const res = await requestFn(params)
    
    // 处理响应数据
    if (res && (res.code === '200' || res.code === 200) && res.data) {
      // 转换为下拉选项格式
      const productList = props.requestFunction?res.data.list:res.data

      productOptions.value = productList.map(product => ({
        label: product[props.labelKey] || product.productName || '',
        value: product[props.valueKey] || product.recId || '', // 使用自定义字段或recId作为value
        productNo: product.productNo || '', // 保存商品编号
        rawData: product // 保存原始数据
      }))

    } else {
      productOptions.value = []
    }
  } catch (error) {
    console.error('获取商品列表失败', error)
    ElMessage.error('获取商品列表失败')
    productOptions.value = []
  } finally {
    productSearchLoading.value = false
  }
}

// 处理商品搜索，使用防抖函数减少请求次数
const handleProductSearch = debounce((query) => {
  if (query) {
    productSearchLoading.value = true
    fetchProductList(query).finally(() => {
      productSearchLoading.value = false
    })
  } else {
    fetchProductList()
  }
}, 300)

// 处理商品变化事件
const handleProductChange = (val) => {
  // 获取选中的商品详细数据
  let selectedData = null;
  
  if (props.multiple) {
    // 多选模式：返回选中项的完整数据数组
    selectedData = val.map(id => {
      const option = productOptions.value.find(item => item.value === id);
      return option ? {
        id: option.value,
        label: option.label,
        productNo: option.productNo,
        // 返回原始数据
        rawData: option.rawData || option
      } : { id };
    });
  } else {
    // 单选模式：返回单个选中项的完整数据
    const option = productOptions.value.find(item => item.value === val);
    selectedData = option ? {
      id: option.value,
      label: option.label,
      productNo: option.productNo,
      // 返回原始数据
      rawData: option.rawData || option
    } : null;
  }
  
  // 触发change事件，同时传递选中值和详细数据
  emit('change', val, selectedData);
}

// 获取商品详细信息（用于回显）
const fetchProductDetails = async (productIds) => {
  if (!productIds || productIds.length === 0) return
  
  try {
    productSearchLoading.value = true
    
    const idsArray = Array.isArray(productIds) ? productIds : [productIds]
    
    // 构建查询参数，根据valueKey调整
    let params = {
      enableFlag: props.enableFlag
    }
    
    // 根据自定义valueKey构造查询条件
    if (props.valueKey === 'recId') {
      params.recIds = idsArray.join(',')
    } else {
      // 根据实际API支持的方式调整
      params[`${props.valueKey}s`] = idsArray.join(',')
    }
    
    // 合并自定义参数
    if (props.mergeParams && Object.keys(props.customParams).length > 0) {
      params = { ...params, ...props.customParams }
    }
    
    // 使用自定义请求函数或默认请求函数
    const requestFn = props.requestFunction || getProductList
    const res = await requestFn(params)
    
    if (res && (res.code === '200' || res.code === 200) && res.data) {
      // 将获取到的商品数据转换为选项格式
      const productList = props.requestFunction?res.data.list:res.data
      productOptions.value = productList.map(item => ({
        value: item[props.valueKey] || item.recId,
        label: item[props.labelKey] || item.productName,
        productNo: item.productNo || '',
        rawData: item // 保存原始数据
      }))
    }
  } catch (error) {
    console.error('获取商品详情失败', error)
  } finally {
    productSearchLoading.value = false
  }
}

// 暴露方法给父组件使用
defineExpose({
  fetchProductList,
  fetchProductDetails
})

// 组件挂载时加载数据
onMounted(() => {
  // 如果有ownerIds，初始加载商品列表
  if ((props.ownerIds && ((Array.isArray(props.ownerIds) && props.ownerIds.length > 0) || props.ownerIds === 'all'))||props.mergeParams) {
    fetchProductList()
  }
  
  // 如果已有选中的商品ID，加载对应的详情
  if (selectedProductIds.value && selectedProductIds.value.length > 0) {
    fetchProductDetails(selectedProductIds.value)
  }
})
</script>

<style lang="scss" scoped>
/* 可能的特定样式 */
</style> 